<template>
    <div>
        <el-row type="flex" class="editformitem" align="middle">
            <el-col :span="8" class="editlabel">
                <span>数据表格</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <el-select v-model="obj.tableData.tableId" filterable clearable placeholder="请选择数据" size="mini"
                    @change="tableSelectChange">
                    <el-option v-for="item in dataTableList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-row type="flex" class="editformitem" align="middle">
            <el-col :span="8" class="editlabel">
                <span>X轴</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <el-select v-model="obj.tableData.xId" filterable clearable placeholder="请选择数据" size="mini">
                    <el-option v-for="item in columnData" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
        <!-- <el-row type="flex" class="editformitem" align="middle">
          <el-col :span="8" class="editlabel">
            <span>折线列</span>
          </el-col>
          <el-col :span="16" class="editcontent">
            <el-select v-model="obj.tableData.yId" filterable clearable placeholder="请选择数据" size="mini">
              <el-option v-for="item in columnData" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-col>
        </el-row> -->
        <el-row type="flex" class="editformitem" v-for="(item, index) in obj.tableData.barList" :key="'selecty' + index">
            <el-col :span="8" class="editlabel">
                <span>Y轴</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <el-select v-model="item.id" placeholder="选择列" filterable size="mini" class="tableitemclass zztypeslt">
                    <el-option v-for=" item in columnData" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
                <el-select v-model="item.type" size="mini" class="tableitemclass zztypeslt">
                    <el-option label="折线列" :value="1" />
                    <el-option label="柱状列" :value="2" />
                </el-select>
                <el-color-picker popper-class="mycolorview" v-model="item.color" size="small" show-alpha
                    :predefine="predefineColors"
                    @active-change="setColorChange(obj.tableData.barList[index], 'color', $event)" />
                <i class="el-icon-error zzlistbtn" v-if="index > 0"
                    @click="deleteDataYinfo(obj.tableData.barList, index)"></i>
                <div v-if="item.type == 1" style="line-height:35px;">
                    <el-checkbox v-model="item.isSmooth">曲线</el-checkbox>
                    <el-checkbox v-model="item.isAreaColor">投影</el-checkbox>
                    <el-checkbox v-model="item.isShowSymbol">圆点</el-checkbox>
                    <span style="margin-right:10px;"></span>
                    <el-color-picker v-if="item.isAreaColor" popper-class="mycolorview" v-model="item.areaColor"
                        size="small" show-alpha :predefine="predefineColors"
                        @active-change="setColorChange(obj.tableData.barList[index], 'areaColor', $event)" />
                </div>
                <div v-if="item.type == 2" style="line-height:35px;">
                    <el-checkbox v-model="item.isAreaColor">投影</el-checkbox>
                    <span style="margin-right:10px;"></span>
                    <el-color-picker v-if="item.isAreaColor" popper-class="mycolorview" v-model="item.areaColor"
                        size="small" show-alpha :predefine="predefineColors"
                        @active-change="setColorChange(obj.tableData.barList[index], 'areaColor', $event)" />
                </div>
            </el-col>
        </el-row>
        <div class="addybtn" @click="addDataYinfo(obj.tableData.barList)">
            + 新增Y值
        </div>
        <el-row type="flex" class="editformitem">
            <el-col :span="8" class="editlabel">
                <span>数据查询范围</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <el-select v-model="obj.tableData.filterTimeType" placeholder="选择列时间范围" size="mini" style="width:190px;">
                    <el-option label="15天" :value="15" />
                    <el-option label="1天" :value="1" />
                    <el-option label="7天" :value="7" />
                    <el-option label="30天" :value="30" />
                    <el-option label="90天" :value="90" />
                    <el-option label="1年" :value="365" />
                    <el-option label="全部" :value="99" />
                </el-select>
                <el-tooltip class="item" effect="dark" content="设置数据查询的时间范围，默认查询最近15天" placement="top-start">
                    <i class="el-icon-warning formlabletips"></i>
                </el-tooltip>
            </el-col>
        </el-row>
        <el-row type="flex" class="editformitem">
            <el-col :span="14" class="editlabel">
                <el-checkbox v-model="obj.tableData.isSetTranslate"></el-checkbox>
                <span> 自定义左边Y轴的范围</span>
            </el-col>
            <el-col :span="8" class="editcontent"></el-col>
        </el-row>
        <el-row type="flex" class="editformitem" v-if="obj.tableData.isSetTranslate">
            <el-col :span="8" class="editlabel">
                <span>Y轴范围</span>
            </el-col>
            <el-col :span="16" class="editcontent dobuleinput">
                <input placeholder="请输入" type="number" style="width: 80px" v-model.number="obj.tableData.minSize" />
                <span>-</span>
                <input placeholder="请输入" type="number" style="width: 80px" v-model.number="obj.tableData.maxSize" />
            </el-col>
        </el-row>
        <el-row type="flex" class="editformitem">
            <el-col :span="10" class="editlabel">
                <el-checkbox v-model="obj.tableData.isShowRightY"></el-checkbox>
                <span> 显示右侧Y轴</span>
            </el-col>
            <el-col :span="14" class="editcontent"></el-col>
        </el-row>
        <el-row type="flex" class="editformitem" v-if="obj.tableData.isShowRightY">
            <el-col :span="8" class="editlabel">
                <span>Y轴数据</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <el-select v-model="obj.tableData.rightColumeId" placeholder="选择列" size="mini">
                    <el-option v-for=" item in columnData" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-col>
        </el-row>

        <el-row type="flex" class="editformitem" align="middle">
            <el-col :span="8" class="editlabel">
                <span>数据量</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <input v-model.number="obj.tableData.count" max="5000" type="number"
                    @change="setValueMaxInfo(5000, obj.tableData, 'count')" />
            </el-col>
        </el-row>
        <el-row type="flex" class="editformitem" align="middle">
            <el-col :span="8" class="editlabel">
                <span>显示值</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <el-checkbox v-model="obj.tableData.isShowValue"></el-checkbox>
                <span style="font-size:14px;margin-right:20px;">网格线</span>
                <el-checkbox v-model="obj.tableData.isShowGrid"></el-checkbox>
            </el-col>
        </el-row>
        <el-row type="flex" class="editformitem" align="middle">
            <el-col :span="8" class="editlabel">
                <span>小数点位</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <input v-model.number="obj.tableData.decimal" min="0" max="4"
                    @change="setValueMaxInfo(4, obj.tableData, 'decimal')" type="number" class="miniinput" />
            </el-col>
        </el-row>
        <el-row type="flex" class="editformitem" align="middle">
            <el-col :span="8" class="editlabel">
                <span>纵向</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <el-checkbox v-model="obj.tableData.isZong"></el-checkbox>
            </el-col>
        </el-row>
        <el-row type="flex" class="editformitem" align="middle">
            <el-col :span="8" class="editlabel">
                <span>数字类型</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <el-radio v-model="obj.tableData.valueType" :label="0">数值</el-radio>
                <el-radio v-model="obj.tableData.valueType" :label="1">百分比</el-radio>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: "TimeOutForm",
    props: {
        predefineColors: Array,
        obj: Object,
        dataTableList: Array,
        setFontStyle: Function,
        setColorChange: Function,
        columnData: Array,
        tableSelectChange: Function,
        setValueMaxInfo: Function,
        deleteDataYinfo: Function,
    },
    model: {
        prop: "obj",
        event: "change",
    },
    methods: {
        setColorChange(item, attr, val) {
            item[attr] = val;
            this.$emit("change", this.obj);
        },
        addDataYinfo(item) {
            if (item.length >= 10) {
                this.$message.error("已达到可设置最大数据列");
                return false;
            }

            item.push({
                id: "",
                color: this.predefineColors[item.length],
                type: 1,
                isSmooth: false,
                isAreaColor: false,
                areaColor: "",
                isShowSymbol: true,
            });
        }
    }
}
</script>